<template>
  <by-dialog :model-value="modelValue" :show-confirm="false" :show-cancel="false" :title="type ? '公众号' : '在线客服'" @close="close">
    <view class="flex-column flex-center margin-top-30">
      <image :src="service" show-menu-by-longpress class="service block" />
      <text v-if="isIos" class="text-36 color-t1 text-bold margin-top-20">苹果用户请扫码进入微信公众平台使用，进入后可获得5次搜题次数</text>
      <text v-else class="text-36 color-t1 text-bold margin-top-20">长按二维码{{ type ? '关注公众号' : '添加客服咨询' }}</text>
    </view>
  </by-dialog>
</template>

<script setup lang="ts">
import { getPublicAccount, getService } from '@/common/api'

interface IProps{
  modelValue: boolean,
  isIos: boolean,
  type: number
}

const props = withDefaults(defineProps<IProps>(), {
  modelValue: false,
  isIos: false,
  type: 0
})

const $emit = defineEmits(['update:modelValue', 'close'])
function close() {
  $emit('close')
  $emit('update:modelValue', false)
}

const service = ref('')
async function handleGetService() {
  const res = await getService()
  service.value = res.data
}

async function handleGetPublicAccount() {
  const res = await getPublicAccount()
  service.value = res.data
}

props.type ? handleGetPublicAccount() : handleGetService()
watch(
  () => props.type,
  (e) => e ? handleGetPublicAccount() : handleGetService()
)
</script>

<style scoped lang="scss">
.service{
  width: 420rpx;
  height: 420rpx;
}
</style>
